.background-gradient{
    width: calc(100vw/3);
    height: 200px;
    border: 1px solid yellow;
    display: flex;
    text-align: center;
    align-items: center;
}
.background-gradient n{
    width: calc(100vw/4);
}
.background-gradient[title="1"]{
    background-image: linear-gradient(180deg,aqua,green);
}
.background-gradient[title="2"]{
    background-image: linear-gradient(to bottom,aqua,green);
}
.background-gradient[title="3"]{
    background-image: linear-gradient(90deg,yellow,orange,25%,purple);
}
.background-gradient[title="4"]{
    background-image: linear-gradient(54deg,red,orange,yellow,green,blue 50%);
}
.background-gradient[title="5"]{
    background-image: radial-gradient(circle,yellow,green);
}
.background-gradient[title="6"]{
    background-image: radial-gradient(200px 80px,aqua,green);
}
.background-gradient[title="7"]{
    background-image:repeating-linear-gradient(to bottom,white,silver 30px);
}
.background-gradient[title="8"]{
    background-image:linear-gradient(to bottom,rgba(46, 49, 124),#ed556a);
}
.background-gradient[title="9"]{
    background-image:radial-gradient(200px 80px,rgba(46, 49, 124),#ed556a);
}
.background-gradient[title="10"]{
    background-image:repeating-linear-gradient(to bottom,rgba(46, 49, 124),#ed556a 50px);
}
.background-gradient[title="11"]{
    background-image:repeating-radial-gradient(200px 80px,rgba(46, 49, 124),#ed556a 70px);
} 